<!--
 * @Author: HeAo
 * @Date: 2022-08-24 14:41:03
 * @LastEditTime: 2022-08-24 19:42:38
 * @LastEditors: HeAo
 * @Description: 
 * @FilePath: \JavaScripe\day-13事件机制\04-dom0和DOM2事件处理程序.html
 * 别乱动！
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- dom0 就是不用在标签绑定事件 -->
  <button id="btn">点我呀</button>
  <button id="btn2">点我呀2</button>
  <script>
    //  1、dom0
    // 函数声明：function sum(){}    函数表达式：var sum=function(){}
    btn = document.getElementById('btn')
    console.log(typeof btn); //object 对象实例，说明它也存在对应的原型对象
    console.log(btn instanceof Object); //true
    btn.onclick = function () {
      console.log('我被点击了');
      console.log(this); //btn本身
      this.onclick = null //移除事件 执行一次后失效
    }

    // 2、dom2  addEventListener()监听和removeEventListener()移除
    btn2 = document.getElementById('btn2')
    var hander = function () {
      console.log('dom2被点击了');
    }
    // addEventListener('事件类型',函数名) 
    btn2.addEventListener('click', function () {
      console.log(this.id);

    }) //这个写法 不能移除，因为是匿名函数

    btn2.addEventListener('click', hander)
    btn2.removeEventListener('click', hander) //一旦设置移除 前面设置的监听无效
  </script>

</body>

</html>